package com.example.treehole.ui.component

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.treehole.ui.theme.Cyan
import com.example.treehole.ui.theme.darkCyan

@Composable
fun SearchBox(
    searchText: MutableState<String>,
    searchMode: MutableState<Boolean>,
    onSearch: () -> Unit
) {

    // 搜索框
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .fillMaxWidth()
            .padding(0.dp)
    ) {
        SearchBar(
            value = searchText.value,
            onValueChange = { searchText.value = it },
            placeholder = "搜搜想看的帖子...",
            modifier =
            Modifier
                .weight(1f)
                .padding(top = 8.dp)
                .padding(start = 24.dp)
                .height(40.dp)
                .background(Color.LightGray, RoundedCornerShape(20.dp)),
            leadingIcon = {
                Icon(
                    imageVector = Icons.Default.Search,
                    contentDescription = "搜索",
                    tint = Cyan,
                    modifier = Modifier.padding(start = 8.dp)
                )
            },
            onSearch = {
                onSearch()
                searchMode.value = true
            }
        )
        TextButton(
            onClick = {
                onSearch()
                searchMode.value = true
            },
            modifier =
            Modifier
                .padding(start = 4.dp)
                .padding(top = 8.dp)
                .align(Alignment.CenterVertically),
            colors =
            ButtonDefaults.buttonColors(
                contentColor = darkCyan,
                containerColor = Color.Transparent
            )
        ) {
            Text(
                text = "搜索",
                fontSize = 16.sp,
                modifier = Modifier.align(Alignment.CenterVertically)
            )
        }
    }
}
